<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-01-31 10:51:01
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-28 14:46:20
-->
<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch">
      <x-filter-item :label="$t('system.announcement.title')">
        <el-input
          v-model="searchParams.noticeTitle"
          :placeholder="$t('system.announcement.placeholderInputTitle')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('system.announcement.type')">
        <x-select
          v-model="searchParams.noticeType"
          :options="dictOptions['upms_notice.notice_type']"
          style="width: 100%"
          :placeholder="$t('system.announcement.placeholderSelectType')"
          clearable
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="$t('system.announcement.data')">
        <el-date-picker
          v-model="searchParams.times"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :range-separator="$t('system.announcement.to')"
          :start-placeholder="$t('system.announcement.startTime')"
          :end-placeholder="$t('system.announcement.endTime')"
        >
        </el-date-picker>
      </x-filter-item>
      <x-filter-item :label="$t('system.announcement.state')">
        <x-select
          v-model="searchParams.state"
          :options="dictOptions['system.state']"
          style="width: 100%"
          :placeholder="$t('system.announcement.placeholderStateType')"
          clearable
        ></x-select>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button
              size="small"
              v-hasPermi="['upms:notice:add']"
              type="primary"
              :icon="buttonIcons('add')"
              @click="handleAdd"
            >
              {{ $t('system.announcement.add') }}</el-button
            >
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :min-width="item.minWidth || '-'"
          :width="item.width"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <!-- <x-state-cell
              v-if="item.prop === 'state'"
              :stateClass="scope.row[item.prop] === 0 ? 'gray' : scope.row[item.prop] ? 'success' : ''"
              :text="selectDictLabel(dictOptions['system.state'], scope.row[item.prop] + '')"
            /> -->
            <el-switch
              v-if="item.prop === 'state'"
              :value="scope.row[item.prop]"
              active-color="#4474F6"
              inactive-color="#A5A9B2"
              @change="handleChangeState(scope.row[item.prop], scope.row.id)"
              :disabled="!checkBntPermi('upms:notice:state')"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <span v-else-if="item.prop === 'noticeType'">
              {{ selectDictLabel(dictOptions['upms_notice.notice_type'], scope.row[item.prop] + '') }}</span
            >
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :action-list="actions"
              :permis-list="permissionsActions"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <!-- 预览弹窗 -->
    <announcement-info ref="announcementInfoCom"></announcement-info>
    <!-- 新增/编辑 -->
    <announcement-add ref="announcementAddCom" :dict-options="dictOptions" @handleSuccess="loadData"></announcement-add>
  </x-page>
</template>
<script>
  import { selectDictLabel, QueryDictMixin, TableListMixin, PermissionsMixin, buttonIcons } from '@package/utils'
  import AnnouncementInfo from '../components/announcementInfo.vue'
  import AnnouncementAdd from '../components/announcementAdd.vue'
  // import {  } from '@/common/mixins/index.js'
  import { columns, actions } from '../config/announcement.js'
  import {
    listUrl,
    apiDeleteNotice,
    apiGetNotice,
    apiPutEnableNotice,
    apiPutDisableNotice
  } from '../api/announcement.js'

  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'Announcement',
    components: { AnnouncementInfo, AnnouncementAdd },
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns,
        listUrl,
        actions,
        loading: false,
        searchParams: {
          noticeTitle: '',
          noticeType: '',
          state: '',
          times: [],
          beginTime: '',
          endTime: ''
        },
        dictKeys: ['upms_notice.notice_type', 'system.state']
      }
    },
    computed: {},
    methods: {
      buttonIcons,
      selectDictLabel,
      handleSearch() {
        this.queryParam = JSON.parse(JSON.stringify(this.searchParams))
        this.queryParam.beginTime = this.queryParam.times ? this.queryParam.times[0] : ''
        this.queryParam.endTime = this.queryParam.times ? this.queryParam.times[1] : ''
        delete this.queryParam.times
        this.loadData()
      },
      handleAdd() {
        this.$refs.announcementAddCom.handleOpen()
      },
      handleActions({ key, data }) {
        if (key === 'preview') {
          const noticeInfo = {
            ...data,
            noticeTypeText: this.selectDictLabel(this.dictOptions['upms_notice.notice_type'], data.noticeType)
          }
          this.$refs.announcementInfoCom.handleOpen(noticeInfo)
        } else if (key === 'edit') {
          this.$refs.announcementAddCom.handleOpen(data)
        } else if (key === 'delete') {
          this.handleDeletePrompt(data.id)
        }
      },
      handleDeletePrompt(noticeId) {
        this.$confirm(this.$t('system.announcement.deletePrompt'), this.$t('system.announcement.deleteTips'), {
          confirmButtonText: this.$t('common.sure'),
          cancelButtonText: this.$t('common.cancel')
        })
          .then((confirm) => {
            // const ids = noticeId ? noticeId : this.selectionRows.map((v) => v.id).join(',')
            this.handleDeleteNotice(noticeId)
          })
          .catch((cancel) => {})
      },
      async handleDeleteNotice(noticeId) {
        const { code, msg } = await apiDeleteNotice(noticeId)
        if (code === EnumApiCode.Success) {
          this.$message.success(this.$t('common.deleteSuccess'))
        } else {
          this.$message.error(msg)
        }
        this.loadData()
      },
      // 状态切换
      async handleChangeState(state, ids) {
        const result = Array.isArray(ids) ? ids : [ids]
        try {
          const { code, msg } =
            `${state}` === '0' ? await apiPutEnableNotice(result) : await apiPutDisableNotice(result)
          if (code === EnumApiCode.Success) {
            this.$message.success(this.$t('system.user.successTips'))
          } else {
            this.$message.error(msg)
          }
          this.loadData()
        } finally {
          this.loadData()
        }
      }
    }
  }
</script>
